import React, { FC, useContext } from 'react';
import { Button } from 'antd';
import ZtCourse from '../DragZt/Course';
import ZtBanner from '../DragZt/Banner';
import ZtTitle from '../DragZt/Title';
import ZtTable from '../DragZt/Table';
import QueryTable from '../ProComponents/QueryTable';
import AntdRow from '../Container/AntdRow';
import { DesignRedux } from '../DesignRedux';
import { getDashed } from '../utils';

const RenderField: FC = (props: any) => {
  const { nodeEle } = props;
  const { globalState, dispatch } = useContext(DesignRedux);
  const { rightNode } = globalState;

  const onClickParam = () => {
    if (rightNode.id !== nodeEle.id) {
      dispatch({ rightNode: nodeEle }); // 更新全局变量
    }
  };

  const addBox = (param, clazz) => {
    return (
      <div onClick={onClickParam} className={clazz}>
        {param}
      </div>
    );
  };

  const getRender = (item: any) => {
    // 获取样式
    let clazz = getDashed(rightNode, item);

    let tempCom = (
      <Button onClick={onClickParam} className={clazz}>
        {item.title}
      </Button>
    );
    // 课程
    if (item.comName === 'ztCourse') {
      tempCom = addBox(<ZtCourse property={item} />, clazz);
    }
    // banner
    if (item.comName === 'ztBanner') {
      tempCom = addBox(<ZtBanner property={item} />, clazz);
    }
    // 表格查询
    if (item.comName === 'queryTable') {
      tempCom = addBox(<QueryTable property={item} />, clazz);
    }

    // 表格查询
    if (item.comName === 'ztTitle') {
      tempCom = addBox(<ZtTitle property={item} />, clazz);
    }
    // 表格查
    if (item.comName === 'ztTable') {
      tempCom = addBox(<ZtTable property={item} />, clazz);
    }

    // 行
    if (item.comName === 'row') {
      tempCom = <AntdRow schema={item} />;
    }
    return tempCom;
  };

  return getRender(nodeEle);
};

export default RenderField;
